<template>
  <div class="bg">
    <div class="title">入驻供应商</div>

    <!-- 进度条 -->
    <div class="process">
      <div class="first" v-for="(item, index) in processList" :key="index">
        <div class="top">
          <div
            class="circle"
            :class="{ ccc: state < index, red: state >= index }"
          >
            {{ index + 1 }}
          </div>

          <el-progress
            :percentage="item.percentage"
            :show-text="false"
            color="#F42551"
            v-if="index != 3"
          ></el-progress>
        </div>

        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <el-divider></el-divider>

    <!-- 基本信息 -->
    <div class="basicInformation">
      <div class="subheading">基本信息</div>
      <div class="content">
        <!-- 左侧表单 -->
        <div class="left">
          <div class="info">
            <!-- <el-form ref="form" :model="form" label-width="80px"> -->
            <el-form label-width="80px">
              <el-form-item label="公司名称">
                <el-input
                  placeholder="请正确输入公司名称"
                  v-model="company"
                  :disabled="!edit"
                ></el-input>
              </el-form-item>

              <el-form-item label="法人/负责人">
                <el-input
                  placeholder="请输入法人/负责人姓名"
                  v-model="name"
                ></el-input>
              </el-form-item>

              <el-form-item label="经营类型">
                <el-select v-model="type" placeholder="请选择经营类型">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="主营类别">
                <el-select v-model="kind" placeholder="请选择主营类别">
                  <el-option
                    v-for="item in kindOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="主营产品">
                <el-input
                  placeholder="请输入公司主营产品，如ABS"
                  v-model="primary"
                ></el-input>
              </el-form-item>

              <el-form-item label="所在地区">
                <el-cascader
                  placeholder="请选择经营所在地区"
                  :options="addressList"
                  :props="{ expandTrigger: 'hover', value: 'label' }"
                  @change="handleChange"
                  v-model="handleAddress"
                ></el-cascader>
              </el-form-item>

              <el-form-item label="详细地址">
                <el-input
                  placeholder="请输入详细地址（不需要重复输入省市）"
                  v-model="address"
                ></el-input>
              </el-form-item>

              <el-form-item label="公司简介">
                <el-input
                  type="textarea"
                  v-model="introduction"
                  maxlength="800"
                  show-word-limit
                  placeholder="请输入公司简介"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 右侧上传处 -->
        <div class="right">
          <div class="logo">
            <div class="leftText">公司logo</div>

            <div class="uploadPlace">
              <el-upload
                :class="{ hide: logoImage }"
                :action="imgUpload"
                accept="image/*"
                list-type="picture-card"
                :limit="1"
                :on-success="successCompanyLogo"
                :on-remove="hideCompanyLogo"
                :disabled="!edit"
                :file-list="logoList"
              >
                <div class="uplogo">
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
              </el-upload>
              <span
                >请上传公司logo图标（支持JPG、PNG、JPEG
                格式图片，且大小不超过5M）</span
              >
            </div>
          </div>

          <div class="materials">
            <div class="leftText">入驻材料</div>
            <div class="uploadPlace">
              <el-upload
                :class="{ hide: materialsImage }"
                :action="imgUpload"
                list-type="picture-card"
                :limit="1"
                accept="image/*"
                :on-success="successmaterials"
                :on-remove="hideMateria"
                :disabled="!edit"
                :file-list="materialList"
              >
                <div class="uplogo">
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
              </el-upload>
              <span>营业执照（或申请者名片）</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <button class="cancelButton button" @click="SupplierDetail">取消</button>
    <button class="submitButton button" @click="submit">提交</button>
  </div>
</template>

<script>
import regionJson from "@/json/region";
import { urlLoad } from '/src/filters/index.js'

export default {
  data() {
    return {
      company: "",
      name: "",
      primary: "",
      address: "",
      introduction: "",
      type: "",
      kind: "",
      processList: [
        {
          number: 1,
          percentage: 50,
          name: "选择认证身份",
        },
        {
          number: 2,
          percentage: 0,
          name: "提交资料",
        },
        {
          number: 3,
          percentage: 0,
          name: "平台审核",
        },
        {
          number: 4,
          percentage: 0,
          name: "审核成功",
        },
      ],
      typeOptions: [{ value: "生产型企业" }, { value: "贸易型企业" }],
      kindOptions: [
        { value: "塑胶原料" },
        { value: "改性塑料" },
        { value: "再生塑料" },
        { value: "塑料助剂" },
        { value: "塑料机械" },
        { value: "塑料制品" },
        { value: "塑料模具" },
        { value: "废旧塑料" },
        { value: "检测机构" },
        { value: "物流仓库" },
        { value: "其他服务" },
      ],
      userInfo: {},
      addressList: [],
      handleAddress: [],
      edit: true,
      logoList: [],
      materialList: [],
      checkStatus: "",
      checkId: "",
      // 图片上传
      imgUpload: "https://www.yousubao-01.com/util/file/upload",
      logoImage: false,
      materialsImage: false,
      file: "",
      imageList: "",
      imageList2: "",
      state: 0,
      userMessage:""
    };
  },

  created() {
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
    this.addressList = regionJson;
    this.SupplierDetail();
  },

  methods: {
    // 入驻详情
    async SupplierDetail() {
      let res = await this.$apiFun.SupplierDetail();
      if (
        res.result.status == "PASS" && //判断审核状态
        res.result.companyName !== ""
      ) {
        this.edit = false;
      }
      this.company =
        res.result.memberDetail.supplierInformationCompanyName ||
        res.result.companyName;
      this.name = res.result.linkman;
      this.type = res.result.enterpriseType;
      this.kind = res.result.theMainType;
      this.primary = res.result.theMainProduct;
      this.address = res.result.address;
      this.introduction = res.result.companyBrief;
      this.handleAddress = [res.result.province, res.result.city];
      this.logoImage = true;
      this.materialsImage = true;
      this.checkStatus = res.result.status;
      this.checkId = res.result.id;

      // 公司logo
      if (res.result.companyLogoUrl == "") {
        this.logoList = [];
        this.logoImage = false;
      } else {
        this.logoList = res.result.companyLogoUrl.split(",");
        this.logoList = this.logoList.map((item) => {
          return {
            name: item,
            url: urlLoad(item),
          };
        });
      }

      // 营业执照
      if (res.result.businessLicenseUrl == "") {
        // this.materialList = [];
        this.materialsImage = false;
      } else {
        this.materialList = res.result.businessLicenseUrl.split(",");
        // console.log("this.materialList",this.materialList);
        this.materialList = this.materialList.map((item) => {
          return {
            name: item,
            url: urlLoad(item),
          };
        });
      }
      // console.log("this.checkStatus",this.checkStatus);

      // 判断进度条进度
      if (this.checkStatus == "PENDING") {
        this.processList[0].percentage = this.processList[1].percentage = 100;
        this.state = 2;
      } else if (this.checkStatus == "PASS") {
        this.processList[0].percentage =
          this.processList[1].percentage =
          this.processList[2].percentage =
            100;
        this.state = 3;
        this.getUserInfo();
      } else {
        this.processList[0].percentage = 50;
        this.state = 0;
      }
    },

    async getUserInfo() {
      let res = await this.$apiFun.getUserInfo();
      this.userMessage = res.result;
    },

    // 选择交货地
    handleChange(label) {
      this.province = label[0];
      this.city = label[1];
    },

    // 公司logo上传--
    successCompanyLogo(response, file, fileList) {
      var storeList = [];
      fileList.forEach((item) => {
        var image = item.response.result;
        storeList.push(image);
      });
      this.imageList = storeList.toString();
      if (fileList.length == 1) {
        this.logoImage = true;
      }
    },
    hideCompanyLogo() {
      setTimeout(() => {
        this.logoImage = false;
      }, 1000);
    },

    // 入驻材料上传--
    successmaterials(response, file, fileList) {
      var storeList2 = [];

      // 判断图片长度
      fileList.forEach((item) => {
        var image = item.response.result;
        storeList2.push(image);
      });
      this.imageList2 = storeList2.toString();
      if (fileList.length == 1) {
        this.materialsImage = true;
      }
    },
    hideMateria() {
      setTimeout(() => {
        this.materialsImage = false;
      }, 1000);
    },

    // 提交
    async submit() {
      if (this.userMessage !== '') {
        if(this.userMessage.memberAccount.isMember !== 1) {
          this.$message.error("当前账号不是主账号，无法修改企业信息，请登录主账号再提交");
          return
        }
      } else if (
        this.company == "" ||
        this.name == "" ||
        this.type == "" ||
        this.kind == "" ||
        this.primary == "" ||
        this.province == "" ||
        this.city == "" ||
        this.address == "" ||
        this.introduction == "" ||
        (this.imageList == "" && this.logoList.length == 0)
        // ||(this.imageList2 == "" && this.materialList[0].url == "")
      ) {
        this.$message.error("当前信息填写不完整，请检查并填写完整");
      } else {
        if (this.checkStatus !== "PENDING" && this.checkStatus !== "PASS") {
          let params = {
            companyName: this.company,
            linkman: this.name,
            enterpriseType: this.type,
            theMainType: this.kind,
            theMainProduct: this.primary,
            province: this.province,
            city: this.city,
            address: this.address,
            companyBrief: this.introduction,
            companyLogoUrl: this.imageList,
          };
          if (this.imageList2) {
            params.businessLicenseUrl = this.imageList2;
          }
          if (this.materialList.length !== 0) {
            params.businessLicenseUrl = this.materialList[0].url;
          }
          let res = await this.$apiFun.settledSupplier(params);
          if (res.code == 200) {
            this.$message.success("提交成功，请等待审核");
            this.edit = false;
            this.SupplierDetail();
          }
        } else {
          let params = {
            supplierInformationLinkman: this.name,
            supplierInformationEnterpriseType: this.type,
            supplierInformationTheMainType: this.kind,
            supplierInformationTheMainProduct: this.primary,
            supplierInformationProvince: this.province,
            supplierInformationCity: this.city,
            supplierInformationAddress: this.address,
            supplierInformationCompanyBrief: this.introduction,
            // id: this.checkId,
          };
          let res = await this.$apiFun.supplierUpdate(params);
          if (res.code == 200) {
            this.$message.success("信息更新成功");
            this.SupplierDetail();
          }
        }
      }
    },
  },

  watch: {
    "$route.name": {
      handler() {
        if (this.$route.name == "supplier_enter") {
          this.SupplierDetail();
        }
        // console.log("name",this.$route.name);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
// 进度条
/deep/ .el-progress {
  width: 90%;
  .el-progress-bar__outer {
    height: 2px !important;
  }
}

.bg {
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  font-family: Microsoft YaHei;
  height: 100%;

  .title {
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
    line-height: 0.3rem;
    text-align: left;
    margin-bottom: 0.35rem;
  }

  // 进度条
  .process {
    font-size: 0.18rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    justify-content: center;
    margin-left: 1.6rem;

    .first {
      width: 25%;
      .top {
        display: flex;
        align-items: center;
        .circle {
          width: 0.24rem;
          height: 0.24rem;
          border-radius: 50%;
          &.ccc {
            background: #cccccc;
          }
          &.red {
            background: red;
          }
        }
      }

      .name {
        margin-top: 0.2rem;
        position: relative;
        left: -42%;
        font-size: 0.2rem;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  // 基本信息
  .basicInformation {
    text-align: left;
    height: auto;
    .subheading {
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
      line-height: 0.3rem;
      margin-bottom: 0.3rem;
    }
    .content {
      display: flex;
      // 左侧表单
      .left {
        width: 50%;

        .info {
          border-right: 2px solid #efefef;
          // element表单样式
          /deep/ .el-form {
            .el-input {
              width: 90%;
            }
            .el-textarea {
              width: 90%;
              height: 1.5rem;
            }

            .el-form-item__label,
            .el-input__inner,
            .el-textarea__inner {
              font-size: 0.16rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
            }

            .el-input__inner,
            .el-input__count,
            .el-textarea__inner {
              background-color: #f5f5f5;
            }

            .el-textarea__inner {
              height: 100%;
            }

            .el-select,
            .el-cascader {
              width: 100%;
            }

            .el-form-item__label {
              width: 100px !important;
              text-align: left;
            }
            .el-form-item__content {
              margin-left: 100px !important;
            }

            .el-input__count {
              background: transparent;
            }
          }
        }
      }

      .right {
        width: 49%;
        // background: skyblue;
        .logo,
        .materials {
          display: flex;
          justify-content: space-evenly;
          font-size: 0.16rem;
          font-weight: 400;
          margin-bottom: 0.4rem;
          .leftText {
            width: 20%;
            color: #333333;
          }
          .uploadPlace {
            width: 60%;
            color: #999999;
            position: relative;

            /deep/ .el-upload--picture-card {
              width: 1rem;
              height: 1rem;
              background: #f5f5f5;
              border-radius: 5px;
              cursor: pointer;
              margin-bottom: 0.1rem;
              border: none;

              .uplogo {
                height: 100%;
                position: relative;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                .image {
                  height: 0.36rem;
                  width: 0.36rem;
                }
                .text {
                  line-height: 0.3rem;
                }
              }
            }

            .hide /deep/.el-upload--picture-card {
              display: none;
            }

            /deep/ .el-upload-list--picture-card .el-upload-list__item {
              width: 1rem;
              height: 1rem;
            }
          }
        }
      }
    }
  }

  // 按钮
  .button {
    width: 1.9rem;
    height: 0.4rem;
    border-radius: 5px;
    font-size: 0.16rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 0.3rem;
    border: 1px solid;
    margin-top: 0.8rem;
    cursor: pointer;
  }
  .cancelButton {
    color: #333333;
  }
  .submitButton {
    border: none;
    background: #f42551;
    color: #ffffff;
    margin-left: 0.2rem;
  }
}
</style>